<!--
 * @Author: hashMi 854059946@qq.com
 * @Date: 2023-12-05 17:34:15
 * @LastEditors: hashMi 854059946@qq.com
 * @LastEditTime: 2024-01-09 10:51:16
 * @FilePath: /audition-app/subPages/have-sound/have-sound.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFilesub_titleer查看配置 进行设置: https://github.com/OBKoro1/koro1Filesub_titleer/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="have-sound container">
    <!-- 列表 -->
    <load-list :localData="soundDataList" keyName="_id">
      <template #default="{ list }">
        <view
          style="margin-bottom: 30rpx"
          v-for="(item, index) in list"
          @click="
            $jump(`/subPages/have-sound/sound-detail`, {
              query: { id: item._id },
            })
          "
          :key="index"
        >
          <view class="video flex-a-center">
            <view class="video-image">
              <image
                style="width: 127rpx; height: 116rpx"
                :src="item.log"
                mode=""
              />
            </view>
            <view class="video-right flex-a-center justify-between">
              <view>
                <view class="right-title">{{ item.title }}</view>
                <view class="right-sub-title">{{ item.sub_title }}</view></view
              >
              <view> <u-icon name="arrow-right"></u-icon></view>
            </view>
          </view>
        </view>
      </template>
    </load-list>
  </view>
</template>

<script>
import { getModelList } from "@/api";
export default {
  data() {
    return {
      showPopup: false,
      currentVideo: {},
      listData: [],
    };
  },
  computed: {
    soundDataList() {
      return this.listData.map((item) => {
        item.log = this.$helper.filterCover(item.log[0].url);
        return item;
      });
    },
  },
  methods: {
    async getSoundListData() {
      const { data } = await getModelList("6571251d262fbe2d9d0a826b");
      this.listData = data?.list;
    },
  },
  async onLoad() {
    await this.getSoundListData();
  },
};
</script>

<style lang="scss" scoped>
.have-sound {
  padding: 30rpx;
  background-color: #fff;

  .video {
    padding: 20rpx;
    box-sizing: border-box;
    box-shadow: 0rpx 6rpx 16rpx 1rpx rgba(177, 177, 177, 0.3);
    border-radius: 10rpx;
    // background: #f5f5f5;

    &-image {
      flex-shrink: 0;
      margin-right: 30rpx;
    }

    &-right {
      width: 100%;
      font-size: 22rpx;
      color: #919191;

      .right-title {
        font-size: 28rpx;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-right: 20rpx;
      }
    }
  }
}
</style>
